<template>
  <!-- 合同信息1 -->
  <div class="contractInfoTab">
    <div class="formCon">
      <el-form ref="contractOrderInfo" :model="contractOrderInfo" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="合同名称">
              <el-input v-model="contractOrderInfo.contractNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户名称">
              <el-select v-model="contractOrderInfo.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同日期">
              <el-date-picker type="date" placeholder="合同日期" v-model="contractOrderInfo.contractTime"
                style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货期">
              <el-input v-model="contractOrderInfo.contractNo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="含税价">
              <el-radio-group v-model="contractOrderInfo.taxInclusive">
                <el-radio label="0">不含税</el-radio>
                <el-radio label="1">含税</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="运输方式">
              <el-radio-group v-model="contractOrderInfo.transportWay">
                <el-radio label="0">含运费</el-radio>
                <el-radio label="1">不含运费</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结算货币">
              <el-radio-group v-model="contractOrderInfo.currencyType">
                <el-radio label="0">人民币（CNY）</el-radio>
                <el-radio label="1">美元（USD）</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同总价">
              <el-input v-model="contractOrderInfo.totalAmount"></el-input>

            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="contractOrderInfo.desc"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="箱唛描述">
              <el-input type="textarea" v-model="contractOrderInfo.boxPackText"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-divider content-position="left">订单详情</el-divider>
    <div class="tableBox">
      <el-table :data="tableInfo.tableData" border >
        <el-table-column v-for="(item,index) in tableInfo.columns" :key="index"
                         :prop="item.prop" :label="item.label" :width="item.width" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      contractOrderInfo: {
        id: '',
        contractType: '',
        clientName: '',
        contractNo: '',
        clientType: '',
        contractTime: '',
        vouchAccount: '',
        realSaleNumber: 0,
        clientPayAmount: '',
        oceanFreight: 0,
        freight: '',
        discountPrice: '',
        totalAmount: '',
        differenceValue: '',
        paymentTotalAmount: '',
        remark: '',
        paidAmount: 0,
        finalPaymentAmount: 10
      },
      tableInfo:{
        tableData:[],
        columns:[
          {label: '订单模式', prop: 'clientName'},
          {label: '产品图片', prop: 'userName'},
          {label: '款式分类', prop: 'productNo'},
          {label: '产品名称', prop: 'modelNo'},
          {label: '订单数量', prop: 'modelNo'},
          {label: '客户需求', prop: 'modelNo'},
          {label: '克重', prop: 'unitPrice'},
          {label: '价格', prop: 'unitPrice'},
          {
            label: '采购状态',
            prop: 'localProduct',
            type: 'radio',
            items: [
              {value: 0, text: '不在', tagType: 'danger'},
              {value: 1, text: '在'}
            ],
            width:130,
          },
          {label: '订单状态', prop: 'unitPrice'},
          {label: '开模状态', prop: 'unitPrice'},
          {label: '打样状态', prop: 'unitPrice'},

          {
            label: '日期',
            prop: 'dayTime',
            type: 'date',
            width: 120
          },
          {label: '备注', prop: 'remark'},
          {label: '入库数量', prop: 'remark'},
          {label: '出库数量', prop: 'remark'},
          // {
          //   label: '状态',
          //   prop: 'status',
          //   type: 'radio',
          //   items: [
          //     {value: 0, text: '禁用', tagType: 'danger'},
          //     {value: 1, text: '正常'}
          //   ]
          // }
        ],

      }
    }
  },
  watch: {},
  computed: {},
  created() { },
  mounted() { },
  methods: {},
}
</script>
<style lang="scss" scoped>
.contractInfoTab {
  .formCon{
    height: 200px;
  }
}
</style>
